import useModal from '@/hooks/modalHook'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import {toUserSetting} from '@/libs/pageRedirect'
import {logout} from '@/libs/toolkit'
import EditUserCompanyNameModalForm from '../form/editCompanyModalForm'
import EditUserInfoModalForm from '../form/editUserInfoModalForm'
import EditUserPhoneModalForm from '../form/editUserPhone'
import {IconImg} from '../image'
import {CFormModal, ChangeVisible} from '../modal'
import {CnMediumSpan, CnNormalSpan} from '../text'

const CAvatar = defineComponent({
  setup(props, ctx) {
    const {store, route} = useGlobalAPI()
    const loginUserInfo = computed(() => store.getters['login/userInfo'])

    const {visible, openModal, closeModal} = useModal()

    const {
      visible: editUserInfoModalFormVisible,
      openModal: openModalEditUserInfoModalFormVisible,
      closeModal: closeModalEditUserInfoModalFormVisible
    } = useModal()

    const {
      visible: editUserPhoneModalFormVisible,
      openModal: openModalEditUserPhoneModalFormVisible,
      closeModal: closeModalEditUserPhoneModalFormVisible
    } = useModal()

    const {
      visible: editUserCompanyNameModalFormVisible,
      openModal: openModalEditUserCompanyNameModalFormVisible,
      closeModal: closeModalEditUserCompanyNameModalFormVisible
    } = useModal()

    const headerUtils = [
      {
        label: '个人资料',
        imgName: 'userSetting-gray',
        onClick: () => {
          // openModalEditUserInfoModalFormVisible()
          toUserSetting()
        }
      },
      {
        label: '公司名称',
        imgName: 'company-gray',
        onClick: () => {
          openModalEditUserCompanyNameModalFormVisible()
        }
      },
      {
        label: '手机换绑',
        imgName: 'phone-gray',
        onClick: () => {
          openModalEditUserPhoneModalFormVisible()
        }
      },
      {
        label: '退出登录',
        imgName: 'logout-gray',
        onClick: () => {
          logout()
        }
      }
    ]

    function handleBtnClick(e: MouseEvent) {
      const warningBtn = document.getElementsByClassName('nav-avatar')[0]

      if (e.target === warningBtn) {
        openModal()
      } else {
        closeModal()
      }
    }

    onMounted(() => {
      window.addEventListener('click', handleBtnClick)
    })

    onUnmounted(() => {
      window.removeEventListener('click', handleBtnClick)
    })

    return () => (
      <div class='h-full flex justify-center items-center relative'>
        <IconImg imgName='header' class='w-30 h-30 cursor-pointer nav-avatar'></IconImg>

        <div
          class={[
            'absolute top-1/2 right-0 w-160 transition-all transform translate-y-16 rounded-4 z-10 overflow-hidden bg-white',
            visible.value ? 'page-show-opacity' : 'hidden'
          ]}
          style={{
            boxShadow: '0px 4px 10px 0px rgba(0,0,0,0.1)'
          }}
        >
          <div class='p-24 grid grid-cols-1 gap-y-22'>
            {headerUtils.map(item => (
              <div
                class='h-30 px-7 py-6 flex items-center gap-x-10 cursor-pointer rounded-2 hover:bg-headerHover'
                onClick={item.onClick}
              >
                <IconImg imgName={item.imgName} class='w-18 h-18'></IconImg>
                <CnMediumSpan class='block text-xText'>{item.label}</CnMediumSpan>
              </div>
            ))}
          </div>
        </div>

        {/* <a-modal
          class='w-388'
          visible={editUserInfoModalFormVisible.value}
          centered={true}
          footer={null}
          onCancel={() => {
            closeModalEditUserInfoModalFormVisible()
          }}
        >
          {loginUserInfo.value ? (
            <EditUserInfoModalForm
              userInfo={loginUserInfo.value}
              changeVisible={() => {
                closeModalEditUserInfoModalFormVisible()
              }}
              onFinish={() => {
                location.reload()
              }}
            ></EditUserInfoModalForm>
          ) : null}
        </a-modal> */}

        <a-modal
          class='w-388'
          title={<CnMediumSpan>换绑新的手机号</CnMediumSpan>}
          visible={editUserPhoneModalFormVisible.value}
          centered={true}
          footer={null}
          onCancel={() => {
            closeModalEditUserPhoneModalFormVisible()
          }}
        >
          {loginUserInfo.value ? (
            <EditUserPhoneModalForm
              userInfo={loginUserInfo.value}
              changeVisible={() => {
                closeModalEditUserPhoneModalFormVisible()
              }}
              onFinish={() => {
                location.reload()
              }}
            ></EditUserPhoneModalForm>
          ) : null}
        </a-modal>

        <a-modal
          class='w-388'
          title={<CnMediumSpan>公司名称编辑</CnMediumSpan>}
          visible={editUserCompanyNameModalFormVisible.value}
          centered={true}
          footer={null}
          onCancel={() => {
            closeModalEditUserCompanyNameModalFormVisible()
          }}
        >
          {loginUserInfo.value ? (
            <EditUserCompanyNameModalForm
              userInfo={loginUserInfo.value}
              changeVisible={() => {
                closeModalEditUserCompanyNameModalFormVisible()
              }}
              onFinish={() => {
                location.reload()
              }}
            ></EditUserCompanyNameModalForm>
          ) : null}
        </a-modal>
      </div>
    )
  }
})

export default CAvatar
